<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*in为选项卡普通状态，默认不显示*/
			
			
			.conList{
				margin-left: 40px;
			}
			.conList>a{
				padding: 5px 10px;
				text-decoration: none;
			}
			.in,
			.in_active {
				display: none;
				width: 600px;
				height: 100px;
				background: pink;
				font-size: 50px;
				line-height: 100px;
				text-align: center;
					}
			/*in_active为选项卡选中状态，选中后显示*/
			
			.in_active {
				display: block;

				
			}
			/*con为按钮普通状态，默认文字颜色为黑色*/
			
			.con,
			.con_active {
				color: yellow;
				box-shadow: 0 0 10px #ccc;		
				background-color: pink;
			}
			
			/*con_active为按钮选中状态，选中后文字颜色为白色*/
			
			.con_active {
				color: white;
			}
			#box{
				margin: auto;
				width: 600px;
			}
		</style>
	</head>

	<body>
		<div class="box" id="box">
			
			<nav class="conList">
				<a class="con_active" href="javascript:;">第一个按钮</a>
				<a class="con" href="javascript:;">第二个按钮</a>
				<a class="con" href="javascript:;">第三个按钮</a>
			</nav>
			<ul class="list">
				<li class="in_active">第一张选项卡</li>
				<li class="in">第二张选项卡</li>
				<li class="in">第三张选项卡</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		function Tab(obj) {
			/*元素获取*/
			//获取选项卡展示部分
			this.oList = obj.getElementsByTagName('ul')[0];
			this.aIn = this.oList.getElementsByTagName('li');
			//获取选项卡控制部分
			this.oConList = obj.getElementsByTagName('nav')[0];
			this.aCon = this.oConList.getElementsByTagName('a');
			/*变量设置*/
			//选项卡张数
			this.count = this.aIn.length;
			//当前第几张
			this.cur = 0;
			var _this = this;

			for(var i = 0; i < this.count; i++) {
				//设置索引
				this.aCon[i].index = i;
				//给按钮添加事件
				this.aCon[i].onclick = function() {
					_this.cur = this.index;
					_this.class();
				}
			}
		}
		Tab.prototype.class = function() {
			//去掉所有
			for(var i = 0; i < this.count; i++) {
				this.aIn[i].className = 'in';
				this.aCon[i].className = 'con';
			}
			//显示当前
			this.aIn[this.cur].className = 'in_active';
			this.aCon[this.cur].className = 'con_active';
		}
		
		
		
		//获取选项卡元素
		var oBox = document.getElementById('box');
		//构造选项卡对象
		var tab1 = new Tab(oBox);
	</script>

</html>